.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  > header {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    border-bottom: 1px solid #dddddd;
    background: #ffffff;
    box-shadow: rgba(141, 158, 167, .13) 0 4px 10px 0;
    z-index: 100;

    .logo {
      width: 99.84px;
      height: 100%;
      background-image: url('../assets/cube-light.png');
      background-size: contain;
    }

    nav {
      margin-right: 2em;

      ul {
        display: flex;
      }

      li {
        font-size: 1.2em;
        cursor: pointer;

        + li {
          margin-left: 1em;
        }
      }
    }
  }

  > main {
    display: flex;
    flex: 1;
    flex-direction: row;
    height: calc(100vh - 52px);

    > section:nth-of-type(2) {
      flex: 1;
      height: 100%;
      border-left: 1px solid #dddddd;
      background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent);
      background-size: 20px 20px;
      background-color: transparent;
      overflow: auto;
      border-right: 1px solid #dddddd;
    }

    > section:last-of-type {
      width: 300px;
      height: 100%;
      padding-bottom: 2rem;
      overflow: auto;
    }
  }
}
